<template>
	<div class="index_body">
		<img :src="'http://ielts.tuyaedu.com/boot/sys/common/static/'+ state.indexPosterImg1" alt="">
		<div style="display: flex;" v-if="!state.isLogin">
			<input type="button" class="login_h" @click="openChildWindow(1)" value="登录" autocomplete="new-password">
			<input type="button" class="login_z" @click="openChildWindow(2)" value="注册" autocomplete="new-password">
		</div>
		<img :src="'http://ielts.tuyaedu.com/boot/sys/common/static/'+ state.indexPosterImg2" alt=""
			@click="toSomeOne(state.indexPosterUrl2)" style="cursor: pointer;">
		<img :src="'http://ielts.tuyaedu.com/boot/sys/common/static/'+ state.indexPosterImg3" alt=""
			@click="toSomeOne(state.indexPosterUrl3)" style="cursor: pointer;">
		<img :src="'http://ielts.tuyaedu.com/boot/sys/common/static/'+ state.indexPosterImg4" alt=""
			@click="toSomeOne(state.indexPosterUrl4)" style="cursor: pointer;">
		<img :src="'http://ielts.tuyaedu.com/boot/sys/common/static/'+ state.indexPosterImg5" alt=""
			@click="toSomeOne(state.indexPosterUrl5)" style="cursor: pointer;">
	</div>
</template>
<script setup>
	import {
		onMounted,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	const {
		proxy
	} = getCurrentInstance()
	const router = useRouter()
	const route = useRoute()
	const state = reactive({
		indexPosterImg1: '',
		indexPosterImg2: '',
		indexPosterImg3: '',
		indexPosterImg4: '',
		indexPosterImg5: '',
		indexPosterUrl2: '',
		indexPosterUrl3: '',
		indexPosterUrl4: '',
		indexPosterUrl5: '',
		isLogin: false
	})

	onMounted(() => {
		if (localStorage.getItem('token')) {
			state.isLogin = true
		} else {
			state.isLogin = false
		}
		let posterData = JSON.parse(localStorage.getItem('posterData'))
		state.indexPosterImg1 = posterData[0].photoPath
		state.indexPosterImg2 = posterData[3].photoPath
		state.indexPosterUrl2 = posterData[3].content.replace('<p>', '').replace('</p>', '')
		state.indexPosterImg3 = posterData[4].photoPath
		state.indexPosterUrl3 = posterData[4].content.replace('<p>', '').replace('</p>', '')
		state.indexPosterImg4 = posterData[5].photoPath
		state.indexPosterUrl4 = posterData[5].content.replace('<p>', '').replace('</p>', '')
		state.indexPosterImg5 = posterData[6].photoPath
		state.indexPosterUrl5 = posterData[6].content.replace('<p>', '').replace('</p>', '')
	})

	function openChildWindow(id) {
		window.open('/#/Login?showType=1', '_blank');
	}

	function toSomeOne(url) {
		// router.push(url)
		window.open(url, '_blank')
	}
</script>
<style lang="scss" scoped>
	.index_body {
		width: 100%;
		padding: 0 300px;
		box-sizing: border-box;

		img {
			width: 100%;
		}

		.login_h {
			background-image: linear-gradient(0deg, #ff5f4f 1%, #ff8e70 100%);
			width: 8%;
			height: 42px;
			border: 0;
			border-radius: 7px;
			color: white;
			font-size: 20px;
			margin-top: -5%;
			margin-left: 20%;
			font-weight: bold;
			box-shadow: 1px 4px 10px -1px #ff5f4f;
			font-family: Microsoft JhengHei;
			cursor: pointer;
		}

		.login_z {
			width: 8%;
			height: 42px;
			border: 1px solid #ff5f4f;
			border-radius: 7px;
			font-size: 20px;
			color: #ff5f4f;
			font-weight: bold;
			margin-top: -5%;
			margin-left: 1%;
			background-color: white;
			box-shadow: 1px 4px 10px -1px #ff5f4f;
			font-family: Microsoft JhengHei;
			cursor: pointer;
		}
	}
</style>